<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'EditImg',
})
</script>
<script setup>
import Upload from '@/components/app/upload.vue'
import { qrLinkOrignalForm } from '@/data'
import { deepClone, isEmpty } from '@/utils'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
import Radar from '@/components/app/radar.vue'
import {postRadarUrlData} from '@/api'
const radarRef = ref(null)
const showUpload = ref(true)
const getDiaData = (val) => {
  console.log(toRaw(val),'radar')
  var objRaw = toRaw(val)
 
  form.value.link_url  = objRaw.link
  form.value.title = objRaw.link_title
  form.value.link_picurl= objRaw.image_url
  form.value.link_desc = objRaw.description
  showUpload.value =true
}
const showRadar = ()=>{
  showUpload.value = false
  radarRef.value.show()
}
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const getRadar = async()=>{
  var obj = form.value 
  const r = await postRadarUrlData({url:obj.link_url})
  obj.title = r.data.title
  obj.link_picurl= r.data.url
  obj.link_desc = r.data.desc
  form._value = obj
  console.log(r.data)
}

const dialogVisible = ref(false)

const form = ref({
  link_url:'',
  title:'',
  link_picurl:'',
  link_desc:'',
  type:2
})
const isNew = ref(true)
let initForm = {}

const formRef = ref()
const show = (val) => {
  if (!isEmpty(val)) {
    var object = deepClone(qrLinkOrignalForm)
    form.value = Object.assign(object, val)
    isNew.value = false
  } else {
    isNew.value = true
  }
  dialogVisible.value = true
}
const rules = ref({
  // title: [
  //   { required: true, message: '请输入名称', trigger: 'blur' },
  //   { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' },
  // ],
})
const change = (e) => {}
const cancel = (done) => {
  resetForm()
  dialogVisible.value = false
}
const getUploadImg = (val) => {
  form.value.link_picurl = val.url
}
const resetForm = () => {
  form.value = qrLinkOrignalForm
}
const submit = () => {
  // if (!formRef) return
  // formRef.value.validate((valid) => {
  //   if (valid) {
      emits('getDialogueData', toRaw(form.value))
      cancel()
  //   } else {
  //     console.log('error submit!')
  //     return false
  //   }
  // })
}
const emits = defineEmits(['getDialogueData'])
defineExpose({
  show,
})
</script>
<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      :title="(isNew == true ? '新增' : '编辑') + '链接附件'"
      width="700px"
      :before-close="cancel"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="链接地址：" prop="title">
          <el-input v-model="form.link_url" placeholder="链接地址请以https开头" style="width:450px" />
          <el-button type="primary" @click="getRadar" style="margin-left: 10px;">搜索</el-button>
        </el-form-item>
        <div class="app-margin-bottom">
          <el-button type="primary" @click="showRadar">选择互动雷达</el-button>
        </div>
        <el-form-item label="链接标题：" prop="link_title">
          <el-input v-model="form.title" placeholder="" />
        </el-form-item>
        <el-form-item label="链接描述：" prop="link_desc">
          <el-input v-model="form.link_desc" placeholder="" />
        </el-form-item>
        <el-form-item  v-if="showUpload"  label="链接封面" prop="link_picurl">
          <Upload :imgurl="form.link_picurl" @getImg="getUploadImg($event, val)" />
          
        </el-form-item>



        <!-- <el-form-item label="高级设置：" prop="setStatus">
          <div>
            <el-switch
              :active-value="1"
              :inactive-value="0"
              @change="handleRefresh"
              size="small"
              v-model="form.setStatus"
            />
            <span class="app-switch-right-text">
              已{{ form.setStatus == '1' ? '开启' : '关闭' }}
            </span>
          </div>
        </el-form-item>
        <el-form-item
          label="链接追踪设置："
          prop="linkSet"
          class="app-margin-bottom-s"
        >
          <div>
            <el-switch
              :active-value="1"
              :inactive-value="0"
              @change="handleRefresh"
              size="small"
              v-model="form.linkSet"
            />
            <span class="app-switch-right-text">
              已{{ form.linkSet == '1' ? '开启' : '关闭' }}
            </span>
          </div>
        </el-form-item>
        <div class="">
          <el-checkbox
            true-label="1"
            false-label="0"
            v-model="form.behavior"
            @change="handleRefresh"
            size="large"
          >
            <span>
              <span>行为通知</span>
              <span class="app-words-tip-weak">
                （当客户点击雷达链接时，发送雷达链接的员工将会收到消息提醒）
              </span>
            </span>
          </el-checkbox>
        </div>
        <div class="">
          <el-checkbox
            true-label="1"
            false-label="0"
            v-model="form.dynamic"
            @change="handleRefresh"
            size="large"
          >
            <span>
              <span>动态通知</span>
              <span class="app-words-tip-weak">
                （当客户点击雷达链接时，会将客户的打开行为、阅读时长和阅读完成率记录在客户动态里）
              </span>
            </span>
          </el-checkbox>
        </div>
        <div class="">
          <el-checkbox
            true-label="1"
            false-label="0"
            v-model="form.tag"
            @change="handleRefresh"
            size="large"
          >
            <span>
              <span>客户标签</span>
              <span class="app-words-tip-weak">
                （给点击雷达链接的客户打上选中的标签）
              </span>
            </span>
          </el-checkbox>
          <div class="app-margin-bottom">
            <el-button type="primary">客户标签</el-button>
          </div>
        </div>
        <div class="">
          <el-checkbox
            true-label="1"
            false-label="0"
            v-model="form.score"
            @change="handleRefresh"
            size="large"
          >
            <span>
              <span>设置客户评分</span>
              <span
                class="app-tip-words app-words-tip-weak app-gap-words-left-s"
              >
                什么是客户评分？
              </span>
            </span>
          </el-checkbox>
        </div>
        <div class="">
          <el-checkbox
            true-label="1"
            false-label="0"
            v-model="form.saveRadar"
            @change="handleRefresh"
            size="large"
          >
            <span class="app-flex-left">
              <span>保存为企业雷达</span>
              <el-popover
                width=""
                popper-style="padding: 0px;min-width:0px"
                placement="top"
                trigger="hover"
              >
                <div class="app-container">
                  保存为常用雷达链接，可快捷选择
                </div>
                <template #reference>
                  <MyIcon class="question-icon" name="Question" />
                </template>
              </el-popover>
            </span>
          </el-checkbox>
        </div> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>

      <Radar @getDiaData="getDiaData($event,val)" ref="radarRef"/>
      
    </el-dialog>
  </div>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
